<template>
  <div class="fillcontain" v-loading="loading">
    <bt-col-header title="场景管理"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="80px">
        <el-form-item label="场景名称" class="col-md-6">
          <el-input v-model="dataForm.sceneName" placeholder="场景名称" clearable></el-input>
        </el-form-item>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button :plain="true" type="info" shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="resetData()">重置</rich-button>
          </div>
        </div>
      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button type="info" icon="circle-plus" plain @click="add()">新增</el-button>
        </div>

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table :data="dataList" border style="width: 100%; ">
            <el-table-column type="index" header-align="center" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="sceneIdentify" header-align="center" align="center" label="场景标识">
            </el-table-column>
            <el-table-column prop="sceneName" header-align="center" align="center" label="场景名称">
            </el-table-column>
            <el-table-column prop="sceneDesc" header-align="center" align="center" label="场景说明">
            </el-table-column>

            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button v-if="isAuth('scene:edit')" type="text" size="small" @click="edit(scope.row.sceneId)">
                  修改
                </el-button>
                <!-- <el-button v-if="isAuth('scene:view')" type="text" size="small" @click="showJava(scope.row)">流程源码
                </el-button> -->
                <!-- <el-button v-if="isAuth('scene:test')" type="text" size="small" @click="showResult(scope.row.sceneIdentify)">测试
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination 
            class="float-right mt-2"
            @size-change="sizeChangeHandle" 
            @current-change="currentChangeHandle" 
            :current-page="page.pageIndex" 
            :page-sizes="[10, 20, 50, 100]" 
            :page-size="page.pageSize" 
            :total="page.totalPage" 
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>  
    </div>
    

    <!-- 弹窗, 测试-->
    <test-flow v-if="testFlowVisible" ref="testFlow"></test-flow>

    <el-dialog title="代码编辑" width="80%" :close-on-click-modal="false" :visible.sync="javaCodeVisible">
      <el-row>
        <el-col :span="24">
          <!--          <el-card class="box-card">-->
          <!--            <div slot="header" class="clearfix">-->
          <!--              <el-button type="primary" size="small" @click="saveJava">保存</el-button>-->
          <!--            </div>-->
          <div class="temp_content">
            <codemirror ref="mycode" :value="flowJava" v-model="flowJava" :options="cmOptions" class="code">
            </codemirror>
          </div>
          <div class="temp_footer">
            <el-button type="primary" size="small" @click="saveJava">保存</el-button>
          </div>
          <!--          </el-card>-->
        </el-col>
      </el-row>

    </el-dialog>

  </div>
</template>

<script>
import { pageList } from '@/api/ruleConfig/scene'
import { getByIdentify, updateFlow } from '@/api/ruleConfig/flow'
import TestFlow from './test-flow'
import constant from "../../../../../api/constant";

import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/ambiance.css'  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require('codemirror/mode/javascript/javascript') // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {
  data() {
    return {
      ruleFlow: {
        flowJava: ''
      },
      flowJava: '',
      editFlowVisible: false,
      javaCodeVisible: false,
      loading: false,
      templateStr: '',
      sceneId: null,
      showVisbale: false,
      dataForm: {
        sceneType: '',
        sceneName: '',
        sceneIdentify: ''
      },
      dataList: [],
      dataListLoading: false,
      testFlowVisible: false,
      cmOptions: {
        value: '',
        mode: 'x-java',
        theme: 'ambiance',
        readOnly: false,
        lineNumbers: true
      },
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  components: {
    codemirror,
    TestFlow
  },
  activated() {
    this.getDataList()
  },
  methods: {
    resetData() {
      this.dataForm.sceneName = ''
    },
    // 编辑场景
    edit(id) {
      constant.clearTag(this)
      this.$router.push({ path: "/drools-ruleConfig/scene/edit-flow/" + id })
    },
    // 新增场景
    add(id) {
      constant.clearTag(this)
      this.$router.push({ path: "/drools-ruleConfig/scene/edit-flow/" })
    },

    refreshVisble() {
      this.editFlowVisible = false
    },

    // 源码查看
    showJava(row) {
      this.javaCodeVisible = true
      let params = {
        flowIdentify: row.flowIdentify
      }
      this.flowJava = ''
      getByIdentify(params).then(res => {
        this.ruleFlow = res.data.data.ruleFlow
        this.flowJava = res.data.data.flowJava
      })
    },

    // 保存源码
    saveJava() {
      let params = {
        flowJava: this.flowJava,
        ruleFlow: JSON.stringify(this.ruleFlow)
      }
      updateFlow(params).then(res => {
        this.getDataList()
        this.javaCodeVisible = false
      })
    },
    //测试
    showResult(id) {
      this.testFlowVisible = true
      this.$nextTick(() => {
        this.$refs.testFlow.init(id)
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val
      this.page.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        sceneName: this.dataForm.sceneName,
        sceneIdentify: this.dataForm.sceneIdentify
      }
      pageList(params).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        this.dataList = res.data.data.list
        this.page.totalPage = res.data.data.totalCount
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },
    editFlow(id) {
      this.$router.push({ name: 'demo-X6', query: { id: id } })
    }
  }
}
</script>
<style>
body .el-table th.gutter {
  display: table-cell !important;
}
.CodeMirror {
  height: 400px;
}
.temp_footer {
  padding: 20px;
  text-align: center;
}
</style>
